<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="shortcut icon" href="../favicon.ico"/>
    <script src="../libs/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/hf_index.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../libs/iconfont/iconfont.css">


</head>
<body>
    <!-- 头部区域 -->
    <header></header>

    <!-- 内容区域 -->
    <main>
        <nav>
            <div>
                <div class="logo"><a href="../index.html"><img src="../img/logo.png" alt=""></a></div>
                <ul>
                    <li><a href="../html/list.html">华为专区</a></li>
                    <li><a href="#">鸿蒙智联</a></li>
                    <li><a href="#">全球甄选</a></li>
                    <li><a href="#">家电家装馆</a></li>
                    <li><a href="#">华为智选</a></li>
                    <li><a href="#">HarmonyOS</a></li>
                </ul>
                <div class="search">
                    <div>
                        <span class="iconfont">&#xe618</span>
                        <input type="text" placeholder="搜索商品">
                        <span>×</span>
                    </div>                
                </div>
            </div>
            
        </nav>

        <!-- 开始 -->
        <div class="detailnav">
            <!-- <div>
                <a href="">首页</a>
                <span>&nbsp;>&nbsp;</span>
                <a href="">手机</a>
                <span>&nbsp;>&nbsp;</span>
                <a href="">HUAWEI Mate系列</a>
                <span>&nbsp;>&nbsp;</span>
                <a href="">【搭载HarmonyOS 2】HUAWEI Mate 40 Pro 4G 全网通 8GB+128GB（亮黑色）</a>
            </div> -->
        </div>

        <!-- 内容区域 -->
        <div class="detailmain">
            <!-- 放大镜 -->
            <div class="main">
                <div class="smallBox">
                    <img src="" class="detailimg">
                    <span class="boxNone"></span>
                </div>
                <div class="bigBox">
                    <img src="" class="detailimg">
                </div>
                <div class="picBox">
                    <div class="pic"><img src="../img/phone1.png" alt=""></div>
                    <div class="pic"><img src="../img/phone2.png" alt=""></div>
                    <div class="pic"><img src="../img/phone7.png" alt=""></div>
                    <div class="pic"><img src="../img/phone4.png" alt=""></div>
                </div>
            </div>

            <!-- 款式区域 -->
            <div class="right">
            
                <!-- 标题 -->
                <!-- <h1 class="detailtitle">【搭载HarmonyOS 2】HUAWEI Mate 40 Pro 4G 全网通 8GB+128GB（亮黑色）</h1> -->
                <h1 class="detailtitle"></h1>
                <!-- 说明 -->
                <!-- <span class="detailexlain">【Mate 40系列旗舰新品】搭载HarmonyOS 2，超感知徕卡电影影像</span> -->
                <span class="detailexlain"></span>
                <!-- 价格区域 -->
                <div class="rightprice">
                    <div class="rtprice">
                        <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                        <i>抢购价</i>
                        <!-- <b class="detailnew"> ¥5899.00</b>
                        <m class="detailold">¥ 6099.00</m> -->
                        <b class="detailnew"></b>
                        <m class="detailold"></m>

                    </div>
                    <div class="promotion">
                        <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                        <div>
                            <span><i>限时特价</i><b>限时直降200元</b></span>
                            <span><i>赠送积分</i><b>购买即赠商城积分，积分可抵现~</b></span>
                        </div>
                    </div>
                </div>

                <!-- 分割线 -->
                <hr>

                <!-- 服务说明 -->
                <div class="description">
                    <div class="service">
                        <span>服务说明</span>
                        <span>四川&nbsp;>&nbsp;成都&nbsp;>&nbsp;武侯</span>
                        <span><i>现货</i>，今天21:59前付款，预计10月24日（周日）送达</span>
                    </div>
                    <div class="explain">
                        <span>已满48元包邮</span>
                        <span>由华为终端提供商品、发货开票及售后服务</span>
                        <span>查看详情</span>
                    </div>
                    <div class="code">
                        <span>商品编码</span>
                        <span>2601010285116</span>
                    </div>
                </div>

                <!-- 分割线 -->
                <hr>

                <!-- 商品类型 -->
                <div class="goodstype">
                    <!-- 选择颜色 -->
                    <div class="goodscolor">
                        <span>选择颜色</span>
                        <div class="colorimg"><img src="../img/color1.png" alt=""><span>夏日胡杨</span></div>
                        <div class="colorimg"><img src="../img/color2.png" alt=""><span>秋日胡杨</span></div>
                    </div>
                    <!-- 选择版本 -->
                    <div class="goodsedition">
                        <span>选择版本</span>
                        <div class="edition">4G全网通 8GB+256GB</div>
                        <div class="edition">4G全网通 8GB+128GB</div>
                    </div>
                    <!-- 选择套餐 -->
                    <div class="goodspackage">
                        <span>选择套餐</span>
                        <div class="package">官方标配</div>
                    </div>
                    <!-- 选择服务 -->
                    <div class="goodssevice">
                        <span>保障服务</span>
                        <div class="sevice">华为无忧服务， ￥1359</div>
                        <div class="sevice">碎屏保服务一年， ￥399</div>
                        <div class="sevice">华为延长服务宝（一年期）， ￥374</div>
                    </div>
                    <!-- 推荐 -->
                    <div class="goodsrecommed">
                        <span>推&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;荐</span>
                        <div class="recommed">
                            <img src="../img/recommed1.webp" alt="">
                            <div class="recommedtxt">HUAWEI Mate 40 Pro 环闪保护壳（玻璃背盖版专用）</div>
                        </div>
                        <div class="recommed">
                            <img src="../img/recommed2.webp" alt="">
                            <div class="recommedtxt">HUAWEI Mate 40 RS保时捷设计</div>
                        </div>
                    </div>
                    <!-- 已选择商品、加入购物车 -->
                    <div class="goodsquantity">
                        <p>已选择商品:<i>釉白色 / 4G全网通 8GB+256GB / 官方标配</i></p>
                        <div class="quantity">
                            <div class="addqt">
                                <input type="text" value="1" class="quantity1">
                                <div class="add">
                                    <span class="plus">+</span>
                                    <span class="reduce">-</span>
                                </div>
                            </div>
                            <button class="join">加入购物车</button>
                            <button class="buy"><a href="../html/cart.html" class="returfa">立即下单</a></button>
                        </div>
                    </div>
                </div>

            


                
            </div>

        </div>


        <!-- 区域分割线 -->
        <div class="line"></div>

        <!-- 商品详情区域，需渲染 -->
        <div class="goodsdetail"></div>


    </main>

    <!-- 区域分割线 -->
    <div class="line"></div>


    <!-- 尾部区域 -->
    <footer></footer>

    <script>
        //头部和尾部加载
        $('header').load('./header.html',()=>{
            (function fn(){
                let session = sessionStorage.getItem('name')-0
                if(!session){
                    $('.headeruser').html('登录')
                    $('.headerpass').html('注册')
                }else{
                    let local = JSON.parse(localStorage.getItem('DELL'))
                    let find = local[session]
                    // console.log(find.user)
                    $('.headeruser').html('欢迎'+ find.user)
                    $('.headerpass').attr('href','#')
                    $('.headerpass').html('退出').on('click', function () {
                        $('.headeruser').html('登录')
                        $('.headerpass').html('注册')
                        // .attr('href','../html/register.html')
                        sessionStorage.removeItem('name')
                        location.href="../index.html"

                    })
                    
                }
                
            }())
        })
        $('footer').load('./html',()=>{
            

            $('.gocart').on('click',function(){
                let user = document.querySelector('.headeruser').innerHTML
                let localuser = JSON.parse(localStorage.getItem('DELL'))
                let res = localuser.some(item=>{return '欢迎'+item.user == user})
                
                if(!res){
                    alert("您还未登陆！")
                    $('.gocart').removeAttr('href')
                }
            })

        })

    </script>

    <script src="../js/detail.js"></script>

</body>
</html>